<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="用户名字">
        <el-input v-model="form.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="form.account" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size=""
          icon="Search"
          @click="getUserInfoData"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card style="margin-top: 20px">
    <el-button type="primary" icon="Plus">添加用户</el-button>
    <el-button type="danger" icon="Delete">批量删除</el-button>
    <h1 style="margin: 10px 0; font-weight: 600">
      用户管理（仅演示，操作后不生效）
    </h1>
    <!-- table展示用户信息 -->
    <el-table
      style="margin-top: 10px"
      :data="tableData"
      :default-sort="{ prop: 'createDate', order: 'descending' }"
      width="100%"
      height="360px"
      stripe
      lazy
    >
      <el-table-column fixed type="selection" align="center"></el-table-column>
      <el-table-column
        fixed
        label="#"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        fixed
        label="用户编号"
        align="center"
        prop="id"
        width="100px"
      >
        <template #="{ row }">
          <el-text class="mx-1">{{ row.id }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        label="用户头像"
        align="center"
        prop="imageUrl"
        width="100px"
      >
        <template #="{ row }">
          <el-avatar :src="row.imageUrl" />
        </template>
      </el-table-column>
      <el-table-column
        label="用户名字"
        align="center"
        prop="userName"
        width="100px"
      >
        <template #="{ row }">
          <el-text class="mx-1">{{ row.userName }}</el-text>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="sex">
        <template #="{ row }">
          <el-tag :type="row.sex == 1 ? 'primary' : 'danger'">
            {{ row.sex == 1 ? '男' : '女' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="用户名称"
        align="center"
        prop="account"
        width="100px"
      >
        <template #="{ row }">
          <el-text class="mx-1">{{ row.account }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        label="用户角色"
        align="center"
        prop="role"
        width="150px"
      >
        <template #="{ row }">
          <el-text class="mx-1">{{ row.role }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        sortable
        align="center"
        prop="createDate"
        width="200px"
      >
        <template #="{ row }">
          <el-text class="mx-1">{{ row.createDate }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        prop="updateDate"
        width="200px"
      >
        <template #="{ row }">
          <el-text class="mx-1">{{ row.updateDate }}</el-text>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200px">
        <template #="{ row }">
          <el-button type="primary" icon="Edit"></el-button>
          <el-popconfirm :title="`你确定删除${row.attrName}?`" width="200px">
            <template #reference>
              <el-button type="danger" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 10px"
      v-model:current-page="pagination.curPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[5, 10]"
      :small="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="pagination.total"
      :background="true"
      @size-change="sizeChange"
      @current-change="currentChange"
      @prev-click="prevPage"
      @next-click="nextPage"
    />
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { UserDto, UserPageDto } from 'dto/acl/user/index.ts'
import type { ResponseData } from 'dto/globalDto.ts'
import { getUserInfo, getUsers } from '@/api/acl/user/index.ts'
import { ElMessage } from 'element-plus'

let form = ref({
  userName: '',
  account: '',
})
let tableData = ref<UserDto[]>([])
let pagination = ref({
  curPage: 1,
  pageSize: 5,
  total: 0,
})

onMounted(() => {
  getUsersData(pagination.value.curPage, pagination.value.pageSize)
})

/**
 * 根据当前页码和页量来获取用户数据
 */
const getUsersData = async (curPage: number, pageSize: number) => {
  let result: ResponseData<UserPageDto> = await getUsers(curPage, pageSize)
  if (result.code == 200) {
    tableData.value = result.data.users
    pagination.value.total = result.data.count
  } else {
    ElMessage({
      type: 'error',
      message: result.message,
    })
  }
}

/**
 * 通过用户名或者账号搜索
 */
const getUserInfoData = async () => {
  let result = await getUserInfo(form.value.userName, form.value.account)
  if (result.code == 200) {
    tableData.value = result.data
  } else {
    ElMessage({
      type: 'error',
      message: result.message,
    })
  }
}
/**
 * page-size 改变时触发
 */
const sizeChange = (value: number) => {
  pagination.value.pageSize = value
  getUsersData(pagination.value.curPage, pagination.value.pageSize)
}

/**
 * current-page 改变时触发
 * @param value 跳转的页数
 */
const currentChange = (value: number) => {
  pagination.value.curPage = value
  getUsersData(pagination.value.curPage, pagination.value.pageSize)
}

/**
 * 上一页
 */
const prevPage = (value: number) => {
  console.log('上一页', value)
}

/**
 * 下一页
 */
const nextPage = (value: number) => {
  console.log('下一页', value)
}
</script>

<style scoped></style>
